<template>
    <div class='reclist'>
      <div class="clscontlist" >
        <div class="clscontlistTop" >
          <span>歌单推荐</span>
          <span>更多 &nbsp; &gt;</span>
        </div>
        <div class="clscontlistBottom">
          <van-grid :column-num="3" :border="false">
              <van-grid-item 
               v-for="(item,index) in recobjs"
              :key="index"
              :gutter='5'>
                <van-image :src="item.picUrl"/>
                <p>{{item.name}}</p>
              </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
</template>
<script>
import {recsongslist} from "../../../api/boke/clstitle"
export default {
    components: {},
    data() { 
        return {
            recobjs:[],
        };
    },
    computed: {},
    watch: {},
    
    methods: {
        
    },
   async created() {
       const res = await recsongslist({
      cookie: localStorage.cookie,
    }) 
       this.recobjs = res.data.recommend;
    },
    mounted() {
        
    },
    beforeCreate() {}, 
    beforeMount() {},
    beforeUpdate() {}, 
    updated() {}, 
    }
</script>
<style scoped>
      .clscontlist{
    font-size:.28rem;
  }  
   .clscontlistTop{
     overflow:auto; 
     height: .8rem;
   }
   .clscontlistTop span{
    display: inline-block;
    
   }
  .clscontlistTop span:nth-child(1){
    float: left;
    padding: .25rem;
  }
  .clscontlistTop span:nth-child(2){
    float: right;
    border: solid 0.02rem rgb(170, 169, 169);
    border-radius: .2rem;
    margin: .15rem;
    padding:.1rem;
  }
  .clscontlistBottom p{
    color: rgb(162, 162, 164);
    margin-top: .2rem;
    display: inline-block;
    width: 1.613333rem;
    font-size: 0.25rem;
    height: .408933rem;
    line-height: .408933rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

</style>